<script setup lang='ts'>
import { ref, reactive,nextTick } from "vue"
import { ElMessage } from "element-plus"

import { roleAllocateAuthorityApiPost } from "@/api/userMangement"
defineOptions({
  name: 'addListAd'
})
const emit = defineEmits(['refresh'])

const permissionTree = ref()
const props = defineProps({
  saveMenuList: {
    type: Array,
    default: () => []
  }
})
const defaultProps = {
  children: 'authority',
  label: 'title',
}

const dialogBasic = ref({
  title: "角色权限分配  ",
  visible: false,
  width: 600,
  height: 550,
  showFooter: true,
  marginTop: "5vh",
})

const rolePer = reactive({
  roleCode: null,
  authorityCodeList: []
})
//显示弹框
const show = (type: string, row?: any,list?:any) => {
  rolePer.roleCode = row.code
  dialogBasic.value.visible = true
  nextTick(()=>{
    console.log(list);
    permissionTree.value!.setCheckedKeys(list,false)
  })
}
const onClose = () => {
  rolePer.authorityCodeList=[]
  rolePer.roleCode=null
  dialogBasic.value.visible = false
}
const onConfirm = async () => {
  // 需要获取所有选中的状态

  // dialogBasic.value.visible = false
  let checkAll = []
  let halfCheck = []
  checkAll = permissionTree.value!.getCheckedKeys(false)
  halfCheck = permissionTree.value!.getHalfCheckedKeys()
  const combinedArray = checkAll.concat(halfCheck);
  rolePer.authorityCodeList = [...new Set(combinedArray)] as any
  
  const res = await roleAllocateAuthorityApiPost(rolePer)
  if (res.code == 20000) {
    try {
      onClose()
      emit('refresh')
      ElMessage({
        type: "success",
        message: "角色权限分配成功"
      })

    } catch (error) {
      ElMessage({
        type: "error",
        message: "角色分配失败"
      })
    }
  }
}
const handleCheckChange = (
  data: any,
  checked: boolean,
  indeterminate: boolean
) => {
  console.log(data, checked, indeterminate)
}
const handleNodeClick = (node: any, data: any) => {
  console.log(node, data);
}
defineExpose({
  show
})
</script>

<template>
  <SysDialog :title="dialogBasic.title" :width="dialogBasic.width" :height="dialogBasic.height"
    :show-footer="dialogBasic.showFooter" :visible="dialogBasic.visible" :margin-top="dialogBasic.marginTop"
    @on-close="onClose" @on-confirm="onConfirm">
    <template v-slot:content>
      <div class="element-plus-tree">
        <!-- :show-checkbox="true" -->
        <el-tree ref="permissionTree" :data="saveMenuList" :show-checkbox="true" :props="defaultProps"
          :default-expand-all="true" :highlight-current="true" node-key="code" :expand-on-click-node="false"
          @check-change="handleCheckChange" :indent="22">
          <template #default="{ node, data }">
            <span v-if="!node.isLeaf" style="display: flex; align-items: center;">
              <el-icon v-if="node.expanded" style="margin: 0 6px 0 0px;" size="16">
                <FolderOpened />
              </el-icon>
              <el-icon v-else style="margin: 0 6px 0 0px;" size="16">
                <Folder />
              </el-icon>
              <small class="text-overflow" @click="handleNodeClick(node, data)">{{ node.label }}</small>
            </span>

            <span v-else style="display: flex; align-items: center;">
              <el-icon style="margin: 0 6px 0 0px;" size="16">
                <Document />
              </el-icon>
              <small class="text-overflow" @click="handleNodeClick(node, data)">{{ node.label }}</small>

            </span>
          </template>
        </el-tree>
      </div>
    </template>
  </SysDialog>
</template>

<style lang='scss' scoped>
.element-plus-tree {
  height: 540px;
  overflow: auto;
  //   padding: 100px;

  :deep(.el-tree) {

    /* ---- ---- ---- ---- ^（节点对齐）---- ---- ---- ---- */
    .el-tree-node {

      /* ^ 所有节点 */
      i.el-tree-node__expand-icon {
        padding: 6px;

        &::before {

          background: url("@/assets/add.png") no-repeat 0;
          content: "";
          display: block;
          width: 13px;
          height: 13px;
          font-size: 13px;
          background-size: 13px;
        }

        svg {
          display: none; // 隐藏所有节点的 svg 图标
        }
      }

      /* / 所有节点 */

      /* ^ 已展开的父节点 */
      i.el-tree-node__expand-icon.expanded {
        transform: rotate(0deg); // 取消旋转
        -webkit-transform: rotate(0deg); // 取消旋转

        &::before {
          background: url("@/assets/minus.png") no-repeat 0;
          content: "";
          display: block;
          width: 13px;
          height: 13px;
          font-size: 13px;
          background-size: 13px;
        }
      }

      /* / 已展开的父节点 */

      /* ^ 叶子节点 */
      i.el-tree-node__expand-icon.is-leaf {

        &::before {
          display: none;
        }
      }

      /* / 叶子节点 */

      /* ^ 复选框 */
      .el-checkbox {
        margin: 0 7px 0 2px;

        .el-checkbox__inner {
          width: 14px;
          height: 14px;
          border-radius: 2px;
          border: 1px solid #bbb;
        }

        .el-checkbox__input.is-checked .el-checkbox__inner,
        .el-checkbox__input.is-indeterminate .el-checkbox__inner {
          border: 1px solid #5e7ce0;
        }
      }

      /* / 复选框 */

      .el-tree-node__content {
        small {
          font-size: 13px;
        }
      }
    }

    /* ---- ---- ---- ---- /（节点对齐）---- ---- ---- ---- */

    /* ---- ---- ---- ---- ^（文字高亮）---- ---- ---- ---- */
    .el-tree-node.is-current {
      .el-tree-node__content {
        small {
          color: #5e7ce0;
        }
      }

      .el-tree-node__children {
        small {
          color: unset;
        }
      }
    }

    /* ---- ---- ---- ---- /（文字高亮）---- ---- ---- ---- */

    /* ---- ---- ---- ---- ^（新增辅助线）---- ---- ---- ---- */
    /* ^ 树节点 */
    .el-tree-node {
      position: relative;
      width: auto;
      // width: max-content; // 显示文字宽度
      padding-left: 13px;

      &::before {
        width: 1px;
        height: 100%;
        content: '';
        position: absolute;
        top: -38px;
        bottom: 0;
        left: 0;
        right: auto;
        border-width: 1px;
        border-left: 1px solid #b8b9bb;
      }

      &::after {
        width: 13px;
        height: 13px;
        content: '';
        position: absolute;
        z-index: 0;
        left: 0;
        right: auto;
        top: 12px;
        bottom: auto;
        border-width: 1px;
        border-top: 1px solid #b8b9bb;
      }

      .el-tree-node__content {
        position: relative;
        z-index: 1;
        color: #000;
        padding-left: 0 !important;

        /* ^ 复选框 */
        .el-checkbox {
          margin: 0 10px 0 5.5px;
        }

        /* / 复选框 */
      }

      .el-tree-node__children {
        padding-left: 12px;
      }

      &:last-child::before {
        height: 50px;
      }
    }

    /* / 树节点 */

    /* ^ 第一层节点 */
    >.el-tree-node {
      padding-left: 0;

      &::before {
        border-left: none;
      }

      &::after {
        border-top: none;
      }
    }

    /* / 第一层节点 */

    /* ^ 叶子节点 */
    i.el-tree-node__expand-icon.is-leaf {
      display: none;
    }

    /* / 叶子节点 */

    /* ^ 设置子节点左外边距 */
    .el-tree-node__content:has(.is-leaf) {
      // color: #00ffff;
      margin-left: 25px !important;
    }

    /* / 设置子节点左外边距 */
    /* ---- ---- ---- ---- /（新增辅助线）---- ---- ---- ---- */
  }
}
</style>
